<template>
  <main-layout :showBack="true" title="采购单详情">
    <div class="detail-page">
      <div class="detail-item" v-for="item in detail" :key="item.key">
        {{ item.label }} {{ item.value }}
      </div>
      <van-steps direction="vertical" :active="remark.length" class="vanSteps">
        <van-step v-for="it in remark" :key="it.time">
          <h3>{{ it.userName }}</h3>
          <p>{{ it.time | df }}</p>
        </van-step>
      </van-steps>
    </div>
  </main-layout>
</template>
<script>
import { purchaseDetailApi } from "../../apis/PurchaseApi";
export default {
  data() {
    return {
      props: {
        btnType: {
          type: String,
          require: true,
        },
      },
      detail: [
        { label: "创建人:", key: "createName", value: "" },
        { label: "创建时间:", key: "createTime", value: "" },
        { label: "单据状态:", key: "state", value: "" },
        { label: "项目名称:", key: "projectName", value: "" },
        { label: "材料名称:", key: "materialName", value: "" },
        { label: "采购数量:", key: "materialWeight", value: "" },
        { label: "计量单位:", key: "materialUnit", value: "" },
        { label: "单价:", key: "price", value: "" },
        { label: "供应商名称:", key: "supplierName", value: "" },
        { label: "联系人:", key: "supplierContact", value: "" },
        { label: "联系电话:", key: "supplierPhone", value: "" },
      ],
      remark: [],
    };
  },
  async created() {
    let result = await purchaseDetailApi(this.$route.query.id);
    if (result.code === 200) {
      for (let item of this.detail) {
        item.value = result.data[item.key];
      }
      this.remark = result.data.remark.reverse();
    }
  },
};
</script>